<template>
  <div class="tuijianBox">
      <div class="title">
          <div class="left">
              <span>推荐歌单</span>
          </div>
          <div class="right">
              <mu-btn :btnName="btnName"></mu-btn>
          </div>
      </div>
      <div class="contentBox">
        <div class="part" v-for="item in songsList" :key="item.id">
          <div class="imgBox">
            <img :src="item.picUrl" alt="">
          </div>
          <div class="text"><span>{{item.name}}</span></div>
          <div class="playCount"><i class="iconfont iconbofangsanjiaoxing"></i><span>{{item.playCount}}万</span></div>
          <div class="tips">{{item.copywriter}}</div>
        </div>
      </div>
  </div>
</template>

<script>
import MuBtn from '../../components/button'
import http from '@/utils/index'
import api from '@/utils/api'

export default {
  data () {
    return {
      current: 0,
      flag: true,
      btnName: '歌单广场',
      songsList: []
    }
  },
  filters: {
    /* 格式化播放量 */
    formatNum: function (val) {
      val = Math.floor(val / 10000)
      return val
    }
  },
  components: {
    MuBtn
  },
  created () {
    this.tuijianSongs()
  },
  methods: {
    handleSwipe (item) {
      this.$emit('handleItem', item)
    },
    // 推荐歌单
    tuijianSongs () {
      let params = {
        limit: 6
      }
      http.request(api.tuijianSongs, params, 'GET')
        .then((res) => {
          if (res.code === 200) {
            res.result.forEach(element => {
              element.playCount = this.formatNum(element.playCount)
            })
            this.songsList = res.result
          }
        })
    },
    formatNum (val) {
      val = Math.floor(val / 10000)
      return val
    }
  }
}
</script>

<style scoped>
.tuijianBox{
  width: 94%;
  /* height: 750rpx; */
  margin:auto;
  /* border:1px solid #000; */
}
.title{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.title .left{
  font-weight: bold;
}
.contentBox{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.contentBox .part{
  position: relative;
  width: 30%;
  height: 300rpx;
  margin-top:15px;
  overflow: hidden;
  cursor: pointer;
}
.contentBox .part .imgBox{
  width: 100%;
  height: 75%;
  border-radius: 5px;
}
.contentBox .part .imgBox img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.contentBox .part .text{
  width: 100%;
  height: 25%;
  line-height: 35rpx;
  font-size: 24rpx;
  margin-top: 10rpx;
  /* white-space:w; */
  overflow: hidden;
  white-space:normal;
  text-overflow: ellipsis;

}
.contentBox .part .playCount{
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  font-size: 22rpx;
  margin:5rpx 15rpx 0 0 ;
  justify-content: flex-start;
  align-items: center;
}
.contentBox .part .playCount i{
  font-size: 22rpx;
}
.contentBox .part .tips{
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  max-height: 75rpx;
  /* padding: 10rpx; */
  line-height: 35rpx;
  padding: 0 10rpx;
  color: #fff;
  font-size: 22rpx;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
